import React, { createContext, useState, useEffect, useImperativeHandle, forwardRef, useRef } from 'react';
import { Toast, Modal, Form, Dialog, Button, Input } from 'antd-mobile'
import { validatenull } from "@/utils/validate";
import "./index.less"

const ModalContent = ({ cancel, ListRow,getRow,type }) => {
    const [form] = Form.useForm()
    useEffect(() => {
        form.setFieldsValue({
            ...ListRow,
            sendNum: ''
        })
    },[ListRow])

    const onFinish = (values) => {
        if(!values.sendNum) {
            Toast.show({
                content:"请输入实际归还数量"
            })

            return
        }

        if (values.sendNum === '0') {
            Toast.show({
                content: "归还数量不能为0"
            })
            return
        }
        getRow(values)
    }

    
    const onChange = (v) => {
        if (v === '0') {
            Toast.show({
                content: "归还数量不能为0"
            })
        }
    }
    return (
        <>
            <Form
                form={form}
                onFinish={onFinish}
                footer={
                    <div className='m-footer'>
                        <Button block size='large' onClick={cancel}>
                            取消
                        </Button>
                        <Button block type='submit' color='success' size='large' style={{
                            '--background-color': "#0ea0eb",
                            "--text-color": "#fff"
                        }}>
                            提交
                        </Button>
                    </div>
                }
            >
                <Form.Item
                    name='toolCode'
                    disabled
                    label='备件条码'>
                    <Input placeholder='请输入备件条码' />
                </Form.Item>
                <Form.Item
                    name='toolName'
                    disabled
                    label='备件名称'>
                    <Input placeholder='请输入备件名称' />
                </Form.Item>
                <Form.Item
                    name='warehouse'
                    disabled
                    label='仓库'>
                    <Input placeholder='请输入仓库' />
                </Form.Item>
                <Form.Item
                    name='locationNo'
                    disabled
                    label='货柜'>
                    <Input placeholder='请输入货柜' />
                </Form.Item>

                <Form.Item
                    name='number'
                    disabled
                    label='归还数量'>
                    <Input placeholder='请输入归还数量' />
                </Form.Item>
                <Form.Item
                    name='sendNum'
                    label='实际归还'>
                    <Input placeholder='请输入实际归还数量'  type='number' onChange={v => onChange(v)}  />
                </Form.Item>
            </Form>
        </>
    )
}

function Index (props, ref) {
    const [visible, setVisible] = useState(true);
    const { modalTitle,ListRow,getRow } = props

    useImperativeHandle(ref, () => ({
        setVisible
    }))

    return (
        <Modal
            className="spareModal"
            title={modalTitle}
            visible={visible}
            content={<ModalContent cancel={() => setVisible(false)} type={props.type} ListRow={ListRow} getRow={getRow}/>}
            closeOnAction
            onClose={() => {
                setVisible(false)
            }}
        />
    );
}

export default forwardRef(Index);
